.nav-part{
    border:none;
    height: auto;
    display: flex;
    justify-content: space-between;
    /* 将第一个子元素（.nav-part-left）靠左排布，最后一个子元素（.nav-part-right）靠右排布，中间的空白空间会自动填充。 */
    padding-block: 20px;
    /* block表示垂直于文字书写方向设置内边距 */
    z-index: 1000;
    /* 有层级上下叠加的效果 */
    position: relative;
}
.nav-part-left{
    display: flex;
    gap:100px;
    /* gap设置子元素之间的距离 */
    align-items: center;
}
.nav-part-right{
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    align-items: center;
}
.nav-part-left > div:first-child{
    display: flex;
    align-items: center;
    gap:6px;
}
.nav-part-left > div:first-child > img{
    width: 30px;

}
.nav-part-left > div:first-child > span{
    font-weight: 800;
    font-size: 1.2rem;
}
.nav-part-left > div:first-child > span  > span{ 
    font-weight: 500;
}
.nav-part-left > div:last-child {
    display: flex;
    gap:30px;
    font-size: 0.9rem;
}
.nav-part-right>div:first-child{
    text-transform: capitalize;
    /* 首字母大写 */
}
.nav-part-right >div:last-child{
    color: white;
    background-color: black;
    padding: 14px 22px;
    border-radius: 6px;
    font-weight: 200;
    text-transform: capitalize;
}

/* 交互处理 */
div.nav-items-container.nav-items-container{
    /* 提高优先级 */
    gap:0px;
}
div.nav-items-container.nav-items-container>span{
    /* border: 1px solid red; */
    width: 90px;
    display: flex;
    /* justify-content: center; */
}
div.nav-items-container.nav-items-container>span:first-child{
    margin-right: 20px;
}

.nav-items-container{
    color: rgb(62, 62, 62);
    cursor: pointer;
}
.nav-items-container>span>span:hover{
    color: black;
    font-weight: 700;
}
.nav-items-container>span>span{
    position: relative;
    z-index: 0;
    /* border: 1px solid green; */
}
.nav-items-container>span>span>div{
    padding-top: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    /* background-color: white; */
    /* border: 1px solid red; */
    z-index: -1;
    opacity: 0;
    transition: all 0.3s ease;
    /* ease 的含义是动画将在开始时较慢，然后加速，最后在结束时再次减慢。 */
    pointer-events: none;
}
.nav-items-container>span>span:hover>div{
    opacity: 1;
    pointer-events: auto;
}

.sub-nav-card{
    width: 255px;
    /* height:200px; */
    /* border: 2px solid blue; */
    transition: all 0.3s ease;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap:20px;
    font-weight: 300;
}
.nav-items-container>span>span:hover>div>div{
    transform: translateY(10px);
}




/* 栏目内容 */
.sub-nav-card-item{
    display: flex;
    gap:10px;
}
.sub-nav-card-item>div:first-child{
    width: 18px;
    height: 18px;
    position: relative;
    top:2px;
}
.sub-nav-card-item>div:last-child{
    display: flex;
    flex-direction: column;
    gap:6px;
}
.sub-nav-card-item>div:last-child>span:first-child{
    font-size: 1.1rem;
    font-weight: 700;
}
.sub-nav-card-item>div:last-child>span:last-child{
    text-transform: capitalize;
    color:rgb(172,172,172);
    font-size: 0.85rem;
    text-wrap: nowrap;
}




/* 导航栏界面缩放改变 */

.mobile-nav-container{
    display: none;
    font-size: 2rem;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    /* border: 1px solid green; */
}

.mobile-nav-container > .hamicon{
    width: 14px;
    height: 14px;
    /* display: block; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
}


.mobile-nav-content{
    position: absolute;
    width: 100%;
    height: 100dvh;
    background-color: rgb(248, 248, 248);
    left: 0;
    top: 0;
    padding: 20px;
    transform: translateY(-100%);
    /* -100%针对了元素本身的尺寸 */
    transition: transform 0.3s ease;
}

#mobile-nav{
    display: none;
}

#mobile-nav:checked ~ .mobile-nav-content{
    transform: translateY(0);
}


.mobile-nav-content-header{
    display: flex;
    justify-content: space-between;
    font-size: 1.6rem;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 60px;
}
.mobile-nav-content-items{
    display: flex;
    flex-direction: column;
    gap:20px;
}
.mobile-nav-content-one-items{
    display: flex;
    flex-direction: column;
}
#mobile-nav-item1{
    display: none;
}

.mobile-nav-content-one-items>label{
    display: flex;
    justify-content: space-between;
}

.mobile-nav-content-one-items>div:last-child{
    display: flex;
    flex-direction: column;
    /* border: 2px solid green; */
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.mobile-sub-icon{
    height:16px;
    width:16px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
    /* border: 2px solid red; */
}
#mobile-nav-item1:checked +label>.mobile-sub-icon{
    transform: rotate(-90deg);
}
#mobile-nav-item1:checked ~ div{
    height: 160px;
    /* auto值无法产生过度效果 */
}



/* 次级菜单内容 */
.mobile-nav-content-sub-menu-box{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    margin-top: 20px;
    gap: 30px;
}
.mobile-nav-content-sub-menu-one{
    display: flex;
    align-items: center;
    gap:10px;
}
.mobile-nav-content-sub-menu-one>div{
    width: 24px;
    height: 20px;
    /* border: 1px solid red; */
    display: flex;
}
.mobile-nav-content-sub-menu-one>span{
    font-size: 1.6rem;
    font-weight: 600;
}
.mobile-nav-content-sub-menu-one>span:last-child{
    color: rgb(172,172,172);
    font-size: 1.2rem;
    font-weight: 400;
}


/* 移动栏目底部两个按钮 */
.mobile-buttons>div:first-child{
    background-color: black;
    color: white;
    font-size: 1.2rem;
    padding: 10px 20px;
    border-radius: 6px;
}
.mobile-buttons{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* border: 2px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:20px;
}
.mobile-buttons>span{
    font-size: 1.2rem;
}
@media screen and (max-width: 1024px){
    /* 当页面超过1024px,平板最大宽度,页面就会被切换. */
    .nav-items-container.nav-items-container.nav-items-container{
        display: none;
    }
    .nav-part-right{
        display: none;
    }
    .mobile-nav-container{
        display: flex;
        justify-content: center;
    }
}